<template>
  <div>
    
        <div>
      <div id="foot"></div>
      <div id="right"></div>
    </div>
    <div id="head"></div>

  </div>
</template>

<script>
export default {
  methods: {
    draw() {
      var echarts = require("echarts");
      var chartDom = document.getElementById("head");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
           title: {
        text: '上星期审批项目书'
    },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
           tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: [13, 9, 11, 12, 15, 4, 5],
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);

      var chartDom2 = document.getElementById("foot");
      var myChart2 = echarts.init(chartDom2);
      var option2;

      option2 = {
           title: {
              right: '50px',
        text: '项目分类'
    },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "项目类",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            emphasis: {},
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "水利环境" },
              { value: 735, name: "建筑业" },
              { value: 580, name: "教育" },
              { value: 484, name: "电热力能源" },
              { value: 300, name: "农，林，牧，渔业" },
            ],
          },
        ],
      };

      option2 && myChart2.setOption(option2);

      var chartDom3 = document.getElementById("right");
      var myChart3 = echarts.init(chartDom3);
      var option3;

      option3 = {
           title: {
        text: '各月份审批项目数'
    },
        xAxis: {
          type: "category",
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月",'八月','九月','十月','十一月','十二月'],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130,150,110,40,123,90],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option3 && myChart3.setOption(option3);
    },
  },
  mounted() {
    this.draw();
  },
};
</script>

<style >
#head {
  width: 100%;
  height: 300px;
  clear: both;
}
#foot {
    float: left;
  width: 465px;
  height: 300px;
}
#right {
  float: right;
  width: 700px;
  height: 300px;
}
#right ::after{
  content: 0;
  clear: both;
}
</style>